<template>
  <div class="personal-info">
    <h3 class="title">个人信息</h3>
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本信息" name="user">
        <div class="form">
          <el-form label-width="auto">
            <el-form-item label="用户登录名">
              <el-input disabled v-model="userInfoList.username"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称">
              <el-input disabled v-model="userInfoList.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户拥有角色">
              <el-input disabled v-model="userInfoList.roleNames"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input disabled v-model="userInfoList.phone"></el-input>
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary">更新基本信息</el-button>
            </el-form-item> -->
          </el-form>
          <div class="imgBox">
            <img :src="userInfoList.icon" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="safe">
        <el-form
          label-width="auto"
          :model="formPwd"
          :rules="pwdRules"
          ref="pwdForm"
        >
          <el-form-item prop="id" v-show="false">
            <el-input v-model="userInfoList.id" />
          </el-form-item>
          <el-form-item label="修改密码" prop="password">
            <el-input v-model="formPwd.password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item label="确认密码" prop="repwd">
            <el-input
              v-model="formPwd.repwd"
              placeholder="请输入再次输入密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitPwd">确定</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { UserUpdatePassword } from "@/api/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
const userInfoList = JSON.parse(localStorage.getItem("userInfo"));
const activeName = ref("user");
const handleClick = (tab, event) => {
  console.log(tab, event);
};

const formPwd = reactive({
  id: userInfoList.id,
  password: "",
  repwd: "",
});

const onSubmitPwd = () => {
  UserUpdatePassword(formPwd).then((data) => {
    if (data.data.code === 200) {
      ElMessage.success("成功");
      handleCancelPwd();
      getUserData();
    } else {
      ElMessage.error(data.data.msg);
    }
  });
};

const handleCancelPwd = () => {
  formPwd.password = "";
  formPwd.repwd = "";
};
</script>

<style scoped lang="less">
.form {
  display: flex;
  justify-content: space-between;
}

.imgBox {
  img {
    width: 100px;
    height: 100px;
  }
}

.personal-info {
  padding: 20px;
  background-color: #f9f9f9;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.info-table {
  width: 100%;
  border: 1px solid #d6d9e1;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table {
  font-size: 14px;
}

.el-table th,
.el-table td {
  text-align: center;
}

@media (max-width: 768px) {
  .info-table .el-table-column {
    width: 100%;
  }
}
</style>
